import ballotIcon from "@/assets/image/ballotIcon.png";
import landing from "@/assets/image/patterns/ballot-landing.png";
import { Typography } from "antd";
import "./index.less";

const { Paragraph } = Typography;
export default function Ballot() {
  return (
    <div className="ballot-warpper">
      <div className="Ballot-content">
        <div className="title">How to Join the Ballot</div>
        <div className="ballot-detail">
          <img className="ladding" src={landing} alt="" />
          <div className="mobile-content">
            <img className="ballot-icon" src={ballotIcon} alt="" />
            <div className="text-detail">
              <Typography>
                <Typography.Text className="text-element">
                  <Typography.Text strong className="text-title">
                    Register Your Account
                  </Typography.Text>
                  <Paragraph
                    ellipsis={{
                      rows: 3,
                      expandable: true,
                    }}
                    className="text-content"
                  >
                    To get started, please register an account. This takes just
                    a few minutes and will grant you access to the ballot
                    system.
                  </Paragraph>
                </Typography.Text>
                <Typography.Text className="text-element">
                  <Typography.Text strong className="text-title">
                    Join the Parking Ballot
                  </Typography.Text>
                  <Paragraph
                    ellipsis={{
                      rows: 3,
                      expandable: true,
                    }}
                    className="text-content"
                  >
                    Once your account is set up, you can select your preferred
                    time slot for parking and enter the monthly ballot
                  </Paragraph>
                </Typography.Text>
                <Typography.Text className="text-element">
                  <Typography.Text strong className="text-title">
                    Wait for the Results
                  </Typography.Text>
                  <Paragraph
                    ellipsis={{
                      rows: 3,
                      expandable: true,
                    }}
                    className="text-content"
                  >
                    The results will be sent to your email, so be sure to check
                    your inbox.
                  </Paragraph>
                </Typography.Text>
              </Typography>
            </div>
          </div>
        </div>
      </div>
    </div>
  );
}
